<template>
  <div>
    <el-button type="default" @click="tes">test</el-button>
    <div>
      <div id="editor"></div>
    </div>
    <!-- <div id="editor1"></div> -->
    <!-- <ckeditor :editor="editor" v-model="editorData"></ckeditor> -->
  </div>
</template>
 
<script>
// if (process.client) {
// }

export default {
  data() {
    return {
      content:
        '<p>我是sunshine毛毛，喜欢旅行和记录，每去一个地方，都喜欢用文字记录下来，现在是专职旅游体验师。</p><figure class="image image-style-side"><img src="http://localhost:8010/getImage?name=02df7ef3-0ae5-4a43-8f1b-284bde694180.png"><figcaption>啊手动阀</figcaption></figure>',
      editor: null,
    };
  },
  created() {
    //   this.initCKEditor();
  },
  mounted() {
    if (process.client) {
      const ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
      require("@ckeditor/ckeditor5-build-classic/build/translations/zh-cn");
      // ClassicEditor.instances[]
      ClassicEditor.create(document.querySelector("#editor"), {
        language: "zh-cn",
        removePlugins: ['MediaEmbed'], 
        toolbar: [],
        ckfinder: {
          uploadUrl: "http://localhost:8010/upload"
        }
      })
        .then(editor => {
          editor.isReadOnly = true; //将编辑器设为只读
          editor.removePlugins='toolbar',
          this.editor = editor;
          this.editor.setData(this.content);
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  methods: {
    tes() {
      window.console.log("doc", this.editor.getData());
    },
  }
};
</script>
<style scoped lang="less">
/deep/.ck-content {
  height: 50vh;
}

/deep/div.ck.ck-editor__main > div {
  border: none !important;
  width: 60% !important;
  margin: 20px auto;

}
/deep/div.ck.ck-sticky-panel__content > div{
  display: none;
}
</style>

